<template>
  <view class="u-page__item" v-if="tabbarData && tabbarData.items && tabbarData.items.length > 0">
    <su-tabbar
      :value="activeTab"
      :fixed="true"
      :placeholder="true"
      :safeAreaInsetBottom="true"
      :inactiveColor="tabbarData.color || '#7d7e80'"
      :activeColor="tabbarData.color || '#1989fa'"
      :midTabBar="false"
    >
      <su-tabbar-item
        v-for="(item, index) in tabbarData.items"
        :key="index"
        :text="item.text"
        :name="item.url"
        @tap="sheep.$router.go(item.url)"
      >
        <template v-slot:active-icon>
          <image class="u-page__item__slot-icon" :src="item.iconPath"></image>
        </template>
        <template v-slot:inactive-icon>
          <image class="u-page__item__slot-icon" :src="item.iconPath"></image>
        </template>
      </su-tabbar-item>
    </su-tabbar>
  </view>
</template>

<script setup>
  import { computed, ref } from 'vue';
  import sheep from '@/sheep';

  const props = defineProps({
    path: String,
    default: '',
  });

  const activeTab = ref(0);
  const tabbarData = computed(() => {
    // 从store中获取tabbar数据
    const appStore = sheep.$store('app');
    const tabbar = appStore.template?.basic?.tabbar;

    // 如果没有tabbar数据，返回默认值
    if (!tabbar || !tabbar.items) {
      return {
          items: [
            {
              text: '首页',
              iconPath: '/static/images/tabbar/home.png',
              url: '/pages/index/index',
            },
            {
              text: '分类',
              iconPath: '/static/images/tabbar/category.png',
              url: '/pages/index/category',
            },
            {
              text: '购物车',
              iconPath: '/static/images/tabbar/cart.png',
              url: '/pages/index/cart',
            },
            {
              text: '我的',
              iconPath: '/static/images/tabbar/user.png',
              url: '/pages/index/user',
            },
          ],
          color: '#1989fa',
        };
      }

      return tabbar;
  });

  // 根据当前路由设置激活的tab
  const currentRoute = computed(() => {
    const pages = getCurrentPages();
    if (pages.length > 0) {
      const currentPage = pages[pages.length - 1];
      return currentPage.route;
    }
    return '';
  });

  // 监听路由变化，更新激活的tab
  const onChange = (index) => {
    activeTab.value = index;
  };
</script>

<style lang="scss">
  .u-page {
    padding: 0;

    &__item {
      &__title {
        color: var(--textSize);
        background-color: #fff;
        padding: 15px;
        font-size: 15px;

        &__slot-title {
          color: var(--textSize);
          font-size: 14px;
        }
      }

      &__slot-icon {
        width: 25px;
        height: 25px;
      }
    }
  }
</style>
